<template>
	<view class="my-promotion router">
		<view class="header">
			<view class="name acea-row row-center-wrapper">
				<view>当前余额</view>
				<view @click="navi('/pages/distribution/detail?type=3')" class="record">
					提现记录<span class="iconfont icon-xiangyou"></span>
				</view>
			</view>
			<view class="num">{{ !distribution ? 0 : distribution.balance / 100.0 }}</view>
			<view class="profit acea-row row-between-wrapper">
				<view class="item">
					<view>冻结余额</view>
					<view class="money">{{ !distribution ? 0 : distribution.freezeBalance / 100.0 }}</view>
				</view>
				<view class="item">
					<view>累积已提</view>
					<view class="money">{{ !distribution ? 0 : distribution.totalWithdraw / 100.0 }}</view>
				</view>
			</view>
		</view>
		<view @click="navi('/pages/distribution/detail?type=1')" class="bnt bg-color-red">立即提现</view>
		<view class="list acea-row row-between-wrapper">
			<view @click="navi('/pages/distribution/share')" class="item acea-row row-center-wrapper row-column">
				<span class="yticon iconfont icon-weixinzhifu"></span>
				<view>推广名片</view>
			</view>
			<view @click="navi('/pages/distribution/user_detail')" class="item acea-row row-center-wrapper row-column">
				<view class="yticon iconfont icon-fenxiang2"></view>
				<view>推广人统计</view>
			</view>
			<view @click="navi('/pages/distribution/detail?type=1')" class="item acea-row row-center-wrapper row-column">
				<span class="yticon iconfont icon-iconfontweixin"></span>
				<view>佣金明细</view>
			</view>
			<view @click="navi('/pages/distribution/order_detail')" class="item acea-row row-center-wrapper row-column">
				<span class="yticon iconfont icon-shouye"></span>
				<view>推广人订单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex'; 
	export default {
		data() {
			return {
				distribution: undefined
			}
		},
		onShow() {
			if (this.userInfo.distributionId) {
			    this.loadDistribution()
			}
		},
		methods: {
			navi(url) {
				uni.navigateTo({
					url
				})
			},
			async loadDistribution() {
			    const that = this
			    that.$api.request('distribution', 'info').then(res => {
			        that.distribution = res.data
			    })
			},
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		}
	}
</script>

<style>
	page {
		background-color: rgb(245, 245, 245);
	}
	
	.router {
		position: absolute;
		width: 100%;
	}

	.my-promotion .header {
		background-image: url("http://shopmalling-asset.oss-cn-hangzhou.aliyuncs.com/distribution2.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 375upx;
	}

	.my-promotion .header .name {
		font-size: 30upx;
		color: #fff;
		padding-top: 57upx;
		position: relative;
	}

	.acea-row.row-between-wrapper,
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.acea-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.my-promotion .header .num {
		text-align: center;
		color: #fff;
		margin-top: 25upx;
		font-size: 90upx;
		font-family: GuildfordProBook\ 5;
	}

	.my-promotion .header .name .record {
		font-size: 26upx;
		color: hsla(0, 0%, 100%, .8);
		position: absolute;
		right: 20upx;
	}

	.my-promotion .header .profit {
		padding: 0 20upx;
		margin-top: 33upx;
		font-size: 24upx;
		color: hsla(0, 0%, 100%, .8);
	}

	.acea-row.row-between-wrapper {
		-webkit-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.acea-row.row-between-wrapper,
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.acea-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.my-promotion .header .profit .item {
		min-width: 20upx;
		text-align: center;
	}

	.my-promotion .header .profit .item .money {
		font-size: 34upx;
		color: #fff;
	}

	.my-promotion .bnt {
		font-size: 28upx;
		color: #fff;
		width: 258upx;
		height: 68upx;
		border-radius: 50upx;
		text-align: center;
		line-height: 68upx;
		margin: -32upx auto 0 auto;
	}

	.bg-color-red {
		background-color: #fa7d96 !important;
	}

	.my-promotion .list {
		padding: 0 20upx;
		margin-top: 10upx;
	}

	.acea-row.row-between-wrapper {
		-webkit-box-pack: justify;
		-o-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
	}

	.acea-row.row-between-wrapper,
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.acea-row {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-lines: multiple;
		-moz-box-lines: multiple;
		-o-box-lines: multiple;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.my-promotion .list .item {
		width: 345upx;
		height: 240upx;
		border-radius: 20upx;
		background-color: #fff;
		margin-top: 20upx;
		font-size: 30upx;
		color: #666;
	}

	.acea-row.row-between-wrapper,
	.acea-row.row-center-wrapper {
		-webkit-box-align: center;
		-o-box-align: center;
		-ms-flex-align: center;
		align-items: center;
	}

	.acea-row.row-center-wrapper {
		-webkit-box-pack: center;
		-o-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}

	.acea-row.row-column,
	.acea-row.row-column-between {
		-webkit-box-orient: vertical;
		-o-box-orient: vertical;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.my-promotion .list .item .iconfont {
		font-size: 70upx;
		background-image: -webkit-gradient(linear, left top, right top, from(#fa7d96), to(#fa7d96));
		background-image: linear-gradient(90deg, #fa7d96 0, #fa7d96);
		background-image: -moz-linear-gradient(to right, #fa7d96 0, #fa7d96 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin-bottom: 20upx;
	}
</style>
